<template>
  <div class="goddess-rec">
    <div class="tt"><span>女神推荐</span></div>
    <div class="rec-box">
      <ul class="rec-list clearfix">
        <li class="rec-li" v-for="(item,index) in tuijianList">
          <div class="img">
            <a @click="redirect(item.product_id)">
              <img v-if="item.thumb!=null" :src="item.thumb" :onerror="logo" alt="">
              <img v-if="item.thumb==null" src="../assets/default1.png" alt="">
            </a>
          </div>
          <div class="rec-t">
            <a @click="redirect(item.product_id)">{{item.name}}</a>
          </div>
          <div class="price-b clearfix">
            <div class="fl">
              <span class="price">{{item.price}}</span>
            </div>
            <div class="fr">
              <span class="shoucang " :class="{ 'active': wishList(item.product_id)}" :data-id="item.product_id" v-on:click="shoucangFn(index,item.product_id)">
              </span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="more" >
      <div v-if="more">加载更多...</div>
      <div v-if="end">--THE END--</div>
    </div>
  </div>
</template>

<script>

  import {Toast} from 'mint-ui';

  export default {
    name: 'nvshentuijian',
    data () {
      return {
        tuijianList:[],
        arr2: [],
        token:sessionStorage.user && JSON.parse(sessionStorage.user).token || '',
        maxpage:10,
        more:false,
        end:false,
        logo: 'this.src="' + require('../assets/default.png') + '"'
      }
    },

    mounted: function () {
      let _this = this;
      let page = 1;
      this.getWish();
      this.getProduct(page);
      $(window).off('scroll');
      $(window).on('scroll',function () {
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        if (scrollTop + windowHeight == scrollHeight) {
          page = page + 1;
          _this.more = true;
          _this.end = false;

          if (page > _this.maxpage) {
            _this.more=false;
            _this.end=true;

            return;
          }
          setTimeout(function(){
            _this.getProduct(page);


          },500);
        }else{
          _this.more=false;

        }
      });

    },
    methods: {
      shoucangFn:function(index,id){

        let _this = this;
        if (_this.token == '') {
//          _this.$router.push('/login');
          _this.$router.push({path:'/login',query: {redirect: location.hash.replace('#','')}});
          return;
        }

        var $this = $("[data-id]").eq(index);

        if ($this.hasClass('active')) {
          $this.removeClass('active');
          _this.removeWishlist(id)
        }
        else {
          $this.addClass('active');
          _this.addWishlist(id);
        }
      },
      redirect: function (id) {
        this.$router.push({path: '/shop/details/' + id});
      },
      addWishlist: function (id) {
        var ajaxData = {};
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        ajaxData.product_id = id;
        $.ajax({
          type: 'post',
          url: RouteMap.wishlistAdd,
          data: ajaxData,
          success: function (res) {
            if (res.code == 200) {
              Toast("收藏成功");
            }
            else {
              ////Toast(res.msg)
            }
          }
        })
      },
      removeWishlist: function (id) {
        let ajaxData = {};
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        ajaxData.product_id = id;
        $.ajax({
          type: 'post',
          url: RouteMap.wishlistRemove,
          data: ajaxData,
          success: function (res) {
            if (res.code == 200) {

              Toast("取消收藏");

            }
            else {
//              //Toast(res.msg)
            }
          },
          error:function(){
              Toast("发生未知错误");
          }
        })
      },
      getWish: function () {
        var ajaxData = {};
        var arr = [];
        var _this = this;
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        if (!ajaxData.token) {
          return;
        }
        $.ajax({
          type: 'post',
          url: RouteMap.wishlistGet,
          data: ajaxData,
          success: function (res) {
            if (res.code == 200) {
              arr = res.data.products;
              for (var i = 0; i < arr.length; i++) {
                _this.arr2.push(arr[i].product_id);
              }
            }
            else {
              //Toast(res.msg)
            }
          }
        })
      },
      wishList: function (id) {

        var ajaxData = {};
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        if (!ajaxData.token) {
          return false;
          return;
        }
        var i = this.arr2.length;
        while (i--) {
          if (this.arr2[i] === id) {
            return true;
          }
        }
        return false;
      },
      getProduct: function (page) {

        if(page>this.maxpage)
        {
          this.more=false;
          this.end=true;
          return;
        }
        var _this = this;
        setTimeout(function () {
          var categoryData = {};
          categoryData.cid = 24;
          categoryData.pn = page || 1;
          $.ajax({
            type: 'post',
            url: RouteMap.categoryList,
            data: categoryData,
            success: function (res) {
              if (res.code == 200) {

                _this.tuijianList = _this.tuijianList.concat(res.data.products);
                if(res.data.maxpage<=_this.maxpage){
                  _this.maxpage = res.data.maxpage;
                }

              }
              else {
//                //Toast(res.msg)
              }


            }
          })
        });
      }

    },
    computed: {
//      wishList();
    }

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .goddess-rec {
    background: #fff;
    margin-top: .5rem;
    padding-left: .23rem;
    padding-bottom: .5rem;
    color: #707070;
  }

  .goddess-rec .tt {
    text-align: center;
    padding: .5rem 0 .2rem;
  }

  .goddess-rec .tt span {
    display: inline-block;
    background: #ff7b80;
    color: #fff;
    padding: .1rem .3rem;
  }

  .goddess-rec .rec-li {
    float: left;
    width: 7rem;
    margin-left: .5rem;
    margin-top: .5rem;

  }

  .goddess-rec .rec-li .img {
  width:100%;
    height:8.6rem;
    overflow: hidden;
    position: relative;
  }
  .goddess-rec .rec-li .img img {
    max-width: 100%;
    max-height:100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .goddess-rec a {
    color: #707070;
  }

  .goddess-rec .price-b {
    font-size: .55rem;
  }

  .goddess-rec .rec-t {
    padding-top: .2rem;
    height: 1.8rem;
    overflow: hidden;
    line-height: .9rem;
    margin-bottom: .2rem;
    font-size: .6rem;
  }

  .goddess-rec .guanzhu {

  }

  .goddess-rec .shoucang {
    width: .7rem;
    height: .7rem;
    display: inline-block;
    background: url("../assets/content/icoa3.png");
    background-size: 100% 100%;
  }

  .goddess-rec .shoucang.active {
    width: .7rem;
    height: .7rem;
    display: inline-block;
    background: url("../assets/content/icoa3-ac.png");
    background-size: 100% 100%;
  }

  .goddess-rec .fr {
    padding-right: .2rem;
  }
  .more{
    text-align: center;
    padding:.8rem 0 .5rem;
    font-size: .5rem;
  }
</style>
